import React from 'react'
import { RightOutlined, LeftOutlined  } from "@ant-design/icons"
import { Button, Table } from 'antd'
import { useSelector } from 'react-redux'

export default function Child2() {
  const languages = useSelector((state) => state.publicReducer.language)
  const acquisition_data = [
    {
      key: '1',
      날짜: '2022.11.29',
      코인명: 'EOS',
      매도가격: '1,550',
      수량: '1,550,000',
      삭제일자: "2022.11.10"
    },
    {
      key: '2',
      날짜: '2022.11.28',
      코인명: 'EOS',
      매도가격: '1,550',
      수량: '1,550,000',
      삭제일자: "2022.11.10"
    },
    {
      key: '3',
      날짜: '2022.11.28',
      코인명: 'EOS',
      매도가격: '1,550',
      수량: '1,550,000',
      삭제일자: "2022.11.10"
    },
    {
      key: '4',
      날짜: '2022.11.28',
      코인명: 'EOS',
      매도가격: '1,550',
      수량: '1,550,000',
      삭제일자: "2022.11.10"
    },
    {
      key: '5',
      날짜: '2022.11.28',
      코인명: 'EOS',
      매도가격: '1,550',
      수량: '1,550,000',
      삭제일자: "2022.11.10"
    },
    {
      key: '6',
      날짜: '2022.11.27',
      코인명: 'ADA',
      매도가격: '1,550',
      수량: '1,550,000',
      삭제일자: "2022.11.10"
    },
  ]
  const Unsold_data = [
    {
      key: '1',
      날짜: '2022.11.29',
      코인명: 'EOS',
      매도가격: '1,550',
      수량: '1,550,000',
      삭제일자: "2022.11.10"
    },
    {
      key: '2',
      날짜: '2022.11.28',
      코인명: 'EOS',
      매도가격: '1,550',
      수량: '1,550,000',
      삭제일자: "2022.11.10"
    },
    {
      key: '3',
      날짜: '2022.11.28',
      코인명: 'EOS',
      매도가격: '1,550',
      수량: '1,550,000',
      삭제일자: "2022.11.10"
    },
    {
      key: '4',
      날짜: '2022.11.28',
      코인명: 'EOS',
      매도가격: '1,550',
      수량: '1,550,000',
      삭제일자: "2022.11.10"
    },
    {
      key: '5',
      날짜: '2022.11.28',
      코인명: 'EOS',
      매도가격: '1,550',
      수량: '1,550,000',
      삭제일자: "2022.11.10"
    },
    {
      key: '6',
      날짜: '2022.11.27',
      코인명: 'ADA',
      매도가격: '1,550',
      수량: '1,550,000',
      삭제일자: "2022.11.10"
    },
  ]
  const acquisition_columns = [
    {
      title: languages === "Korean" ? "날짜" : (languages === "Chinese" ? "日期" : "Date"),
      key: '날짜',
      dataIndex: '날짜',
      align:"center",
    },
    {
      title: languages === "Korean" ? "코인명" : (languages === "Chinese" ? "币名" : "Coin"),
      key: '코인명',
      dataIndex: '코인명',
      align:"center",
    },
    {
      title: languages === "Korean" ? "매도 가격" : (languages === "Chinese" ? "卖出价" : "Sell price"),
      dataIndex: '매도가격',
      align:"center",
      key: '매도가격',
    },
    {
      title: languages === "Korean" ? "수량" : (languages === "Chinese" ? "数量" : "Quantity"),
      dataIndex: '수량',
      key: '수량',
      align:"center",
    },
    {
      title: languages === "Korean" ? "삭제 일자" : (languages === "Chinese" ? "删除日期" : "Delete date"),
      key: '삭제일자',
      dataIndex: '삭제일자',
      align:"center",
    },
    {
      title: 'Actions',
      key: 'Actions',
      align:"center",
      render: (row) => <Button onClick={() => console.log(row)}>{languages === "Korean" ? "완전 삭제" : (languages === "Chinese" ? "彻底删除" : "Wipe out")}</Button>
    },
  ]
  const Unsold_columns = [
    {
      title: languages === "Korean" ? "날짜" : (languages === "Chinese" ? "日期" : "Date"),
      key: '날짜',
      dataIndex: '날짜',
      align:"center",
    },
    {
      title: languages === "Korean" ? "코인명" : (languages === "Chinese" ? "币名" : "Coin"),
      key: '코인명',
      dataIndex: '코인명',
      align:"center",
    },
    {
      title: languages === "Korean" ? "매도 가격" : (languages === "Chinese" ? "卖出价" : "Sell price"),
      dataIndex: '매도가격',
      align:"center",
      key: '매도가격',
    },
    {
      title: languages === "Korean" ? "수량" : (languages === "Chinese" ? "数量" : "Quantity"),
      dataIndex: '수량',
      key: '수량',
      align:"center",
    },
    {
      title: languages === "Korean" ? "삭제 일자" : (languages === "Chinese" ? "删除日期" : "Delete date"),
      key: '삭제일자',
      dataIndex: '삭제일자',
      align:"center",
    },
    {
      title: 'Actions',
      key: 'Actions',
      align:"center",
      render: (row) => <Button onClick={() => console.log(row)}>{languages === "Korean" ? "완전 삭제" : (languages === "Chinese" ? "彻底删除" : "Wipe out")}</Button>
    },
  ]
  return (
    <div className='Child2'>
      <div className='main'>
      <p><i><LeftOutlined /></i> 2022{languages === "Korean" ? "년" : (languages === "Chinese" ? "年" : "Year")} 11{languages === "Korean" ? "월 " : (languages === "Chinese" ? "月" : "Month")} <i><RightOutlined /></i></p>
        <section>
          <aside>
            <hgroup>{languages === "Korean" ? "매수 미체결 삭제" : (languages === "Chinese" ? "买入待成交删除" : "Buy Pending Delete")}</hgroup>
            <Table size='small' columns={acquisition_columns} dataSource={acquisition_data} pagination={false} />
            <h4><span>{languages === "Korean" ? "더보기" : (languages === "Chinese" ? "更多" : "More")}</span></h4>
          </aside>
          <aside>
            <hgroup>{languages === "Korean" ? "매도 미체결 삭제" : (languages === "Chinese" ? "卖出待成交删除" : "Sell Pending Delete")}</hgroup>
            <Table size='small' columns={Unsold_columns} dataSource={Unsold_data} pagination={false} />
            <h4><span>{languages === "Korean" ? "더보기" : (languages === "Chinese" ? "更多" : "More")}</span></h4>
          </aside>
        </section>
      </div>
    </div>
  )
}
